<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14_ES13-对象属性hasOwn</title>
  <!-- 
  在 JavaScript 的 ES13（ECMAScript 2022）中，新增了一个非常有用的方法： `Object.hasOwn()` 。这个方法用于判断对象是否具有某个自身属性，提供了更简洁的方式来替代传统的  `Object.prototype.hasOwnProperty()`  方法。
  一、定义

  `Object.hasOwn()`  方法用于判断一个对象是否具有指定的自身属性。与  `hasOwnProperty()`  方法相比， `hasOwn()`  方法提供了更简洁的语法。

  二、语法
  Object.hasOwn(obj, prop);
  - obj：要检查的对象。
  - prop：要检查的属性名，可以是字符串或 Symbol。

  三、示例
   1. 基本用法
  const obj = {
      name: '小明',
      age: 25
  };

  console.log(Object.hasOwn(obj, 'name')); // 输出: true
  console.log(Object.hasOwn(obj, 'gender')); // 输出: false
  在这个例子中， `Object.hasOwn(obj, 'name')`  返回  `true` ，因为  `name`  是  `obj`  的自身属性，而  `gender`  不是。

   2. 使用 Symbol 作为属性名
  const sym = Symbol('id');
  const obj = {
      [sym]: 123
  };

  console.log(Object.hasOwn(obj, sym)); // 输出: true
  console.log(Object.hasOwn(obj, 'id')); // 输出: false
  在这个例子中，使用 Symbol 作为属性名时， `Object.hasOwn(obj, sym)`  返回  `true` ，而  `Object.hasOwn(obj, 'id')`  返回  `false` ，因为  `'id'`  不是  `obj`  的自身属性。

   3. 与  `hasOwnProperty()`  的比较
  const obj = Object.create({ inheritedProp: 'inherited' });
  obj.ownProp = 'own';

  console.log(obj.hasOwnProperty('ownProp')); // 输出: true
  console.log(obj.hasOwnProperty('inheritedProp')); // 输出: false

  console.log(Object.hasOwn(obj, 'ownProp')); // 输出: true
  console.log(Object.hasOwn(obj, 'inheritedProp')); // 输出: false
  虽然  `hasOwnProperty()`  和  `Object.hasOwn()`  都可以用于检查自身属性，但  `Object.hasOwn()`  的语法更简洁。

  四、总结
  - 功能： `Object.hasOwn()`  方法用于检查对象是否具有指定的自身属性，提供了更简洁的语法。
  - 参数：接受两个参数：要检查的对象和属性名。
  - 优势：相较于  `hasOwnProperty()` ， `Object.hasOwn()`  语法更简洁，且不受对象原型链的影响。
  -->
</head>
<body>

  <script>
    const person = {
      name: '张三',
      age: 18,
      address: '北京市',
      // 1.和hasOwnProperty的区别一: 防止对象中也有一个自己的hasOwnProperty方法
      hasOwnProperty() {
        console.log('调用了person的hasOwnProperty方法');
      },
      __proto__: {
        hasOwnProperty() {
          console.log('调用了person.__proto__的hasOwnProperty方法');
        },
        sex: '男'
      }
    }

    // 1.判断对象自身是否包含某个属性
    console.log(person.hasOwnProperty('name')); // true
    console.log(person.hasOwnProperty('toString')); // false
    console.log(person.hasOwnProperty('toString')); // false

    // 2.和hasOwnProperty的区别二: 防止对象中也有一个自己的hasOwnProperty方法
    console.log(person.hasOwnProperty('hasOwnProperty')); // false
    console.log(Object.hasOwn(person, 'hasOwnProperty')); // true

    // 3. 和hasOwnProperty的区别三: 防止对象原型链中也有一个hasOwnProperty方法
    const info = Object.create(null);
    info.name = '李四';
    console.log(Object.hasOwn(info, 'name')); // true
    

  </script>
  
</body>
</html>